<template lang="pug">
.notice-tip(v-if="isShow")
  .wrap(:class="{'animated bounceInDown': isShow}" )
    .close.close-top(@click="isShow = false")
      i.iconfont &#xe60b;
    .content
      .title {{title}}
      .desc {{desc}}
</template>
<script>
let timer = null
export default {
  data() {
    return {
      isShow: false,
      title: "欢迎参与找红包",
      desc: "场景内有大量现金红包随机散落在场景内，赶紧去找，晚了就没有啦！"
    }
  },
  mounted() {
    this.$vgo.on('noticetip:show', obj => {
      if(!obj) return

      this.isShow = true
      this.title = obj.title
      this.desc = obj.desc

      let timer = setTimeout(() => {
        this.isShow = false
      }, 5000)

      if(obj.open) {
        clearTimeout(timer)
      }
    })
  }
};
</script>

<style lang="stylus">
@import '../../assets/styles/color.styl'
.notice-tip
  position: absolute
  top: 26px
  left: 50%
  width: 80%
  transform: translateX(-50%)
  z-index: 101
  .close-top
    position: absolute
    top: 0
    right: 0
    color: $white
    i
      font-size: 30px
  .wrap
    padding: 10px
    box-shadow: 0 2px 4px $gray-light
    background: rgba($black, .5)
    .title
      font-size: 16px
      font-weight: 700
      color: $danger
      padding: 10px 0
    .desc
      line-height: 24px
      font-size: 14px
      color: $white
</style>
